<template>
	<div>
		<el-form :inline="true" :model="customerQueryForm" size="mini">
			<el-form-item>
				<el-input v-model="customerQueryForm.customerName" placeholder="客户"></el-input>
			</el-form-item>

		  
		  <el-form-item>
		    <el-button type="primary" @click="query">查询</el-button>
		  </el-form-item>
		  
		  <el-form-item>
		    <el-button type="primary" @click="exportExcelForTravel">导出</el-button>
		  </el-form-item>
		  <el-form-item>
			<el-button type="text" @click="dialogVisible = true">导入文件</el-button>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="deleteFunc">批量删除</el-button>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="addFunc">新增</el-button>
		  </el-form-item>
		</el-form>
		
		<!--弹出导入文件的页面-->
		<el-dialog
		  title="上传文件"
		  :visible.sync="dialogVisible"
		  width="30%">
		  
		  <el-upload
		    ref="upload" 
			name="file"
		    :action="uploadExcelUrl"
		    :file-list="fileList"
			:multiple="false"
			:headers="uploadExcelHeader"
			:limit="1"
			:accept="accept"
			:on-success="successFunc"
			:on-error="errorFunc"
		    :auto-upload="false">
		    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
		    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload"> {{importDataBtnText}}</el-button>
		    <div slot="tip" class="el-upload__tip">只能上传 EXCEL 格式</div>
		  </el-upload>
		</el-dialog>
		
		
		<!--弹出  新增修改 页面 -->
		<el-dialog
		  :title="operationFormTitle"
		  :visible.sync="dialogOpeFormVisible"
		  width="50%">
		  
		  
		  <el-form  :model="editForm" ref="editForm" :rules="rules"  size="mini">
			  
			  <el-row :gutter="3">
				  <el-col :span="8">
					  <el-form-item prop="customerName" label="客户名">
						  <el-input  v-model="editForm.customerName"></el-input>
					  </el-form-item>
				  </el-col>
				  <el-col :span="8">
					  <el-form-item label="客户类型">
						  <el-select v-model="editForm.type" placeholder="请选择">
							  <el-option
								key="J"
								label="J"
								value="J">
							  </el-option>
							  <el-option
								key="D"
								label="D"
								value="D">
							  </el-option>
							</el-select>
					  </el-form-item>
				  </el-col>
				  <el-col :span="8">
					  <el-form-item prop="initAmount" label="期初金额">
						  <el-input type="number" v-model="editForm.initAmount" ></el-input>
					  </el-form-item>
				  </el-col>
			  </el-row>
			  <el-row :gutter="3">  
				  <el-col :span="8">
					  <el-form-item label="备注">
						  <el-input v-model="editForm.remark"></el-input>
					  </el-form-item>
				  </el-col>
			  </el-row> 
		    <el-form-item size="mini" style="text-align: center;">
		      <el-button type="primary" @click="submitForSave">保存</el-button>
		      <el-button @click="dialogOpeFormVisible = false">取消</el-button>
		    </el-form-item>
		  </el-form>
		  
		  
		</el-dialog>
		
		
		<el-table
			:header-cell-style="{background:'#F5F5F5',color:'#606266'}"
			size='mini' 
		   :data="tableData"
		   :max-height="tableHeight"
		   border
		  @selection-change="handleSelectionChange"
		   style="width: 100%">
		   
		  <el-table-column
		        type="selection"
		        width="55">
		      </el-table-column>
		   
		  <el-table-column
		        fixed="left"
		        label="操作"
		        width="50">
		        <template slot-scope="scope">
		          <el-button @click="editFunc(scope.row)" type="text" size="small">编辑</el-button>
		        </template>
		      </el-table-column>
		   <el-table-column
				   label="序号"
				   width="70px">
			   <template slot-scope="scope">
				   {{scope.$index+1}}
			   </template>
		   </el-table-column>
		    
		   <el-table-column 
			 v-if="false"
		     prop="id"
		     label="index">
		   </el-table-column>
		   <el-table-column
		     prop="customerName"
		     label="客户名">
		   </el-table-column>
		   <el-table-column
		     prop="type"
		     label="客户类型">
		   </el-table-column>
		   <el-table-column
		     prop="initAmount"
		     label="期初金额">
		   </el-table-column>
		   <el-table-column
		     prop="remark"
		     label="备注">
		   </el-table-column>
		 </el-table>
		<div class="block">
					 <el-pagination 
					 background
					   @size-change="handleSizeChange"
					   @current-change="handleCurrentChange"
					   @prev-click="handlePrevClick"
					   @next-click="handleNextClick"
					   :page-sizes="[20, 50, 100, 300,500]"
					   :page-size="DEFAULT_PAGE_COUNT"
					   layout="total, sizes, prev, pager, next, jumper"
					   :total="tableDataCount">
					 </el-pagination>
		  </div>
	</div>
</template>

<script>
	import { getToken } from '../../../util/auth.js';
	import request from '../../../api/request.js'
	import { ObjToFormData } from '../../../util/commonUtil.js';
	import {PRE_URL,DEFAULT_PAGE_COUNT}from '../../../util/constants.js'
	import RoutePaths from '../../../util/constants.js'  //引用模块进来
	
	
	export default{
		name:RoutePaths.ROUTE_BASE_CUSTOMER_NAME,
		data() {
		  return {
			customerQueryForm: {
				customerName: '',
				type:'',
				startPage:1,
				pageCount:DEFAULT_PAGE_COUNT
			},
			//新增 /修改的 form
			editForm: {
				id:'',
				date:'',
				initAmount:'',
				customerName:'',
				type:"D",
				remark:''
			},
			//添加/修改 验证规则
			rules:{
				customerName:[{required:true,message:"必须填写 客户名称",trigger: 'blur'}],
				initAmount:[{required:true,message:"必须填写 初始金额，没有的话默认为0",trigger: 'blur'}]
			},
			
			//上传路径
			uploadExcelUrl:PRE_URL+"/api/customer/uploadCustomer",
			//上传文件的 头文件
			uploadExcelHeader:{Authorization:getToken()},
			//显示的文件列表
			fileList:[],
			//文件上传状态显示
			importDataBtnText:'点击上传',
			//接收文件类型
			accept:".xls,.xlsx",
			
			dialogVisible:false,
			tableHeight: window.innerHeight - 300,
			tableData: [],
			//显示表格中的总数量
			tableDataCount:0,
			//选中的记录
			tableSelectedIds:[],
			// 新增 或者 修改，默认新增
			operationFormTitle:'新增',
			// 显示/隐藏  编辑 面板
			dialogOpeFormVisible:false
		  }
		},
		mounted () {
		},
		methods:{
			//点击上传文件到服务器
			submitUpload(){
				this.$refs.upload.submit();
			},
			//上传成功的方法
			successFunc(response, file, fileList){
				//清空 文件列表
				this.fileList = [];
				//关闭 上传窗口
				this.dialogVisible = false;
				
				this.commonUtil.showMessage(response.code,response.message);
				
				
			},
			//上传失败的方法
			errorFunc(err, file, fileList){	
				//清空 文件列表
				this.fileList = [];
				//关闭 上传窗口
				this.dialogVisible = false;
				
				this.commonUtil.showMessage(response.code,response.message);
			},
			exportExcelForTravel(){
				
			},
			query(){
				
				var form  = ObjToFormData(this.customerQueryForm);
				var me = this;
				
				request.post('/api/customer/listCustomer',
					form).then(
					response => {
						const result = response.data;
						const resultCount = response.count;
				
						me.commonUtil.showMessage(response.code,response.message);
						
						//给 数据显示赋值
						this.tableData = result;
						this.tableDataCount = resultCount;
						
					})
			},
			
			//批量删除
			deleteFunc(){
				let form  = new FormData();
				var me = this;
				form.append("tableSelectedIds",this.tableSelectedIds)
				
				
				request.post('/api/customer/deleteCustomers',
					form).then(
					response => {
						me.commonUtil.showMessage(response.code,response.message);
						
						this.query();
						
					})
			},
			//单个新增
			addFunc(){
				
				//清空属性值
				for(let key in this.editForm){
					this.editForm[key]  = ''
				}

				
				this.operationFormTitle = "新增";
				
				this.editForm.type = "J";
				
				//显示
				this.dialogOpeFormVisible = true;
				
				//清空验证项目
				this.$refs["editForm"].clearValidate();
			},
			
			//编辑
			editFunc(rowObj){
				//赋值
				for(let key in this.editForm){
					this.editForm[key]  = rowObj[key]
				}
				//this.editForm = rowObj;
				
				
				this.operationFormTitle = "修改";
				//显示
				this.dialogOpeFormVisible = true;
				
				//清空验证项目
				this.$refs["editForm"].clearValidate();
			},
			/**
			 * 分页 中选择每页显示条数的时候 触发的方法
			 * */
			handleSizeChange(showCount){
				this.customerQueryForm.pageCount = showCount;
				this.query();
			},
			/**
			 *  页面 改变 时触发的 方法
			 * */
			handleCurrentChange(curPage){
				this.customerQueryForm.startPage = curPage;
				this.query();
			},
			/**
			 *  往前 一页 按钮
			 * */
			 handlePrevClick(curPage){
				 this.customerQueryForm.startPage = curPage;
				 this.query();
			 },
			/**
			 *  往前 一页 按钮
			 * */
			 handleNextClick(curPage){
				 this.customerQueryForm.startPage = curPage;
				 this.query();
			 },
			 /**
			  *  多选 操作
			  * */
			 handleSelectionChange(val){
				 //先清空
				 this.tableSelectedIds = [];
				 val.forEach(item => {
					this.tableSelectedIds.push(item.id);   //把所有的id放进multipleSelection
				 })
			 },
			 /**
			  * 保存 新增或者 修改的值
			  * */
			 submitForSave(){
				 var form  = ObjToFormData(this.editForm);
				 var me = this;
				 //验证
				 this.$refs["editForm"].validate((valid) => {
				  if (valid) {
					 request.post('/api/customer/saveCustomers',
					 	form).then(
					 	response => {
					 		me.commonUtil.showMessage(response.code,response.message);
					 		
					 		this.query();
					 		//隐藏
					 		this.dialogOpeFormVisible = false;
					 		
					 	})
				   } else {
					 return false;
				   }
				 });

			 }
		}
	}
</script>

<style>
</style>
